<template>
  <div class="spell-home-page">
    <navigator :title="title"
               :currmode="true"
               :leftClickCallback="leftClickCallback">
    </navigator>
    <div class="spell-top"></div>
    <img class="spell-home-background" :src="spellHomeBackground" alt="">
    <img class="spell-activity-center"
         :src="spellActivityCenter"
         @click="actionClickActivityCenter"
         alt="">
    <img
          v-if="playNum > 0"
          class="spell-button"
         :src="spellButton"
         @click="actionClickButton"
         alt="">
    <img v-else=""
          class="spell-button"
         :src="spellButtonEnd"
         @click="actionClickButtonEnd"
         alt="">
    <div class="spell-text flex-middle-x layout-flex-center"
    >
      <span class="record" @click="actionClickRecord">中奖记录</span>
      <span class="rules" @click="actionClickRules">活动细则</span>
    </div>
    <!--活动介绍-->
    <div class="activity-is-introduced" v-if="isFinishIntroduced">
      <div class="mask"></div>
      <div class="introduced-box">
        <img class="introduced-close"
             :src="introducedClose"
             @click="actionClickIntroducedClose"
             alt="">
        <img class="introduced-title" :src="introducedTitle" alt="">
        <img class="introduced-background" :src="introducedBackground" alt="">
        <p>
          {{filmDate}}起，持卡人可抽兑《{{filmName}}》10元观影券每人限抽1次。
          活动总限量{{filmNumber}}张，抽兑成功后，持卡人在14天有效期内选座购票并使用该券，
          可以10元价格购买《{{filmName}}》电影票一张，见
          <span @click="actionClickProcess">《使用说明》</span>详情见
          <span @click="actionClickRules">《活动细则》</span>。
        </p>
      </div>
    </div>
    <!--使用流程-->
    <div class="spell-process"
         v-if="isFinishProcess || animationProcess"
         :class="animationProcess?'spell-process':'spell-process-close'">
      <img class="spell-process-background" :src="spellProcessBackground" alt="">
      <img class="spell-process-button"
           :src="spellProcessButton"
           @click="actionClickProcessClose"
           alt="">
    </div>
    <!--中奖记录-->
    <div class="spell-winning-record" v-if="isFinishWinningRecord">
      <div class="spell-record-background"></div>
      <div class="spell-record-box">
        <img class="record-background" :src="recordBackground" alt="">
        <img class="record-title" :src="recordTitle" alt="">
        <!--奖品区域-->
        <div class="record-prize">
          <img class="record-no-prize"
               v-if="isFinishNoPrize && isFinishTicket === 0"
               :src="recordNoPrize" alt="">
          <img class="record-miss"
               v-else-if="isFinishMiss && isFinishTicket === 0"
               :src="recordMiss" alt="">
          <div v-else-if="isFinishTicket === 2">
            <!--改这里《《《《-->
            <img class="record-ticket" src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/role-ticket.png" alt="">
            <!--改这里》》》》-->
            <img class="record-ticket-number" :src="movieTicketImg" alt="">
          </div>
        </div>
        <img class="record-button"
             :src="recordButton"
             @click="actionClickRecordClose"
             alt="">
      </div>
    </div>
    <!--活动提示-->
    <div class="prompt-information-box" v-if="isFinishPrompt">
      <div class="prompt-background"></div>
      <div class="prompt-backdrop">
        <img class="prompt-backdrop-img"
             :src="recordBackground" alt="">
        <p class="prompt-prompting">提示</p>
        <p class="prompt-prizes">{{promptMessage}}</p>
        <img class="prompt-alert-button"
             :src="recordButton" alt=""
             @click="actionPromptDetermine"
        >
      </div>
    </div>
    <!--玩法介绍-->
    <div class="gameplay-is-play" v-if="isFinishPlay">
      <div class="play-background"></div>
      <div class="play-backdrop">
        <img class="play-backdrop-img"
             src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/activities-that-window.png"
             alt="">
        <img class="play-prompting-img"
             src="https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/wfjs1.png"
             alt="">
        <img
          class="play-close"
          @click="actionPlayClose"
          src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/instruction-close.png"
          alt="">
        <div class="play-txt">
          <div>
            <p>1.用户需在一分钟内完成拼图，每位用户有一次参与活动的机会，拼图成功可参与抽奖</p>
            <p>2.抽奖有机会获得1-3张《{{filmName}}》10元观影券</p>
            <p>3.拖动图片与示例相同视为拼图成功</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//  import NetworkActivity from '@/network/NetworkActivity'
  export default {
    data(){
      return {
        title:'拼图活动',
//        改这里《《《《
        filmName:'头号玩家',
        filmNumber:2000,
        filmDate:'03月30日11:00',
        spellHomeBackground:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/spell-home-background.png',
        spellActivityCenter:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/spell-activity-center.png',
        spellButton:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/spell-button.png',
        spellButtonEnd:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/spell-button-end.png',
        spellProcessBackground:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/role-process-background.png.jpg',
//        改这里》》》》
        introducedClose:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/introduced-close.png',
        introducedTitle:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/introduced-title.png',
        introducedBackground:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/introduced-background.png',
        spellProcessButton:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/spell-process-button.png',
        recordBackground:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/record-background.png',
        recordTitle:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/record-title.png',
        recordButton:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/record-button.png',
        recordMiss:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/miss.png',
        recordNoPrize:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/no-prize.png',
        isFinishIntroduced:false,
        isFinishProcess:false,
        isFinishWinningRecord:false,
        animationProcess:false,
        movieTicketNumber:'观影券X1',
        isFinishNoPrize:true,
        isFinishMiss:false,
        isFinishTicket:0,
        isFinishPrompt: false,
        isFinishPlay: false,
        promptMessage: '',
        playNum: 1,
        playSum: 1
      }
    },
    computed:{
      robType: function () {
        return this.$route.query.robType;
      },
      robId: function () {
        return this.$route.query.robId;
      },
      movieTicketImg() {
        if (this.movieTicketNumber === '观影券X1') {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/x1.png';
        } else if (this.movieTicketNumber === '观影券X2') {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/x2.png';
        } else if (this.movieTicketNumber === '观影券X3') {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/x3.png';
        } else {
          return null;
        }
      }
    },
    methods:{
      actionPromptDetermine() {
        this.isFinishPrompt = false;
        if (this.promptMessage !== '活动已结束'){
          this.isFinishPlay = true;
        }
      },
      actionClickProcess(){
        this.isFinishIntroduced = false;
        this.animationProcess = true;
        this.isFinishProcess = true;
      },
      actionClickProcessClose(){
        this.animationProcess = false;
        setTimeout(() => {
          this.isFinishProcess = false;
        }, 1000)
      },
      actionPlayClose(){
        this.isFinishPlay = false;
      },
      actionClickActivityCenter(){
        this.isFinishIntroduced = true;
      },
      actionClickIntroducedClose(){
        this.isFinishIntroduced = false;
      },
      actionClickButton(){
//        改这里《《《《
        this.$router.push({name: 'roleFigureView', query: {robType: this.robType, robId: this.robId}});
//        改这里》》》》
      },
      actionClickButtonEnd(){
        this.actionStatus(1);
      },
      actionClickRecord(){
        this.actionStatus(3);
        this.isFinishWinningRecord = true;
      },
      actionClickRecordClose(){
        this.isFinishWinningRecord = false;
      },
      actionClickRules(){
        //        改这里《《《《
        this.$router.push({name:'roleRuleView', query:{robType:this.robType, robId: this.robId}});
        //        改这里》》》》
      },
      leftClickCallback() {
        this.$router.push({name: 'Discovery'})
      },
      //      http请求
      actionStatus: function (type) {
//        this.showLoading();
//        NetworkActivity.filmVRRobStatus(this.robType, this.robId).then((ret) => {
//          this.closeLoading();
//          if (type !== 3){
//            this.playNum = this.playSum - ret.robNum;
//            if (this.playNum <= 0){
//              this.isFinishWinningRecord = true;
//              this.WinningRecord = true;
//            }
//          }
//          判断没有中奖提示内容是‘没有中奖记录’还是‘擦肩而过’
//          if (this.playNum > 0){
//            this.isFinishNoPrize = true;
//            this.isFinishMiss = false;
//          } else {
//            this.isFinishNoPrize = false;
//            this.isFinishMiss = true;
//          }
//          this.prizeInformation(ret.prizeMap, ret.robNum);
//          if (ret.status === 0) {
//            this.promptMessage = ret.prizeInfo;
//            if (type === 1 && !window.sessionStorage.firstactivity) { // 页面自动加载
//            } else if (type !== 1) {
//              window.sessionStorage.firstactivity = '已抽奖';
//            }
//          } else if ((ret.status === 9)) {
//            this.isFinishPrompt = false;
//            if (type !== 3 && type !== 1) {
//              this.isFinishWinning = true;
//            }
//          } else {
//            this.promptMessage = ret.prizeInfo;
//            this.isFinishPrompt = true;
//            this.isFinishWinningRecord = false;
//          }
//        }, error => {
//          this.closeLoading();
//          this.playNum = 0;
//          if (!this.isFinishWinningRecord){
//            this.isFinishPrompt = true;
//          }
//          if (error.message) {
//            this.promptMessage = error.message;
//          } else {
//            this.promptMessage = '系统正在开小差，请稍后再试！';
//          }
//        })
      },
      prizeInformation(prizeMap, robNum) {
        this.prizeMap = [];
        if (prizeMap) {
          for (let i in prizeMap) {
            console.log(i)
            let prizeMapList = {
              type: prizeMap[i].type,
              info: prizeMap[i].info
            };
            this.prizeMap.push(prizeMapList)
          }
//            判断后台是不是给值
          console.log(this.prizeMap)
          if (this.prizeMap.length === robNum) {
            if (this.prizeMap[this.prizeMap.length - 1].type === 1) {
              this.isFinishTicket = 1;
            } else if (this.prizeMap[this.prizeMap.length - 1].type === 2) {
              this.isFinishTicket = 2;
              this.movieTicketNumber = this.prizeMap[this.prizeMap.length - 1].info;
            } else {
              this.isFinishTicket = 0;
            }
          } else {
            this.isFinishTicket = 0;
          }
        }
      }
    },
    mounted:function(){
      this.actionStatus(1);
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped="">
.spell-home-page{
  width:100%;
  height:100%;
  position: absolute;
  top:0;left:0;
  overflow: hidden;
  /*.spell-top{*/
    /*width:100%;*/
    /*height:0.88rem;*/
  /*}*/

  .spell-home-background{
    width:100%;
    height:100%;
    position: fixed;
    top:0;left:0;
  }
  .spell-activity-center{
    width:0.5rem;
    position: fixed;
    top:4.25rem;right:0;
  }
  .spell-button{
    width:2.85rem;
    position: fixed;
    bottom:1rem;left:50%;
    transform: translate(-50%, 0);
  }
  .spell-text{
    width:100%;
    position: fixed;
    bottom:0.5rem;left:0;
    color:$color-4;
    text-align: center;
    font-size:0.22rem;
    .record{
      margin-right:0.5rem;
    }
    span{
      border-bottom:1px solid $color-4;
    }
  }
  /*活动介绍*/
  .activity-is-introduced{
    width:100%;
    height:100%;
    position: fixed;
    top:0;left:0;
    .mask{
      width:100%;
      height:100%;
      position: fixed;
      top:0;left:0;
      background:$color-black;
      opacity: 0.5;
    }
    .introduced-box{
      width:4.8rem;
      height:5.25rem;
      position: fixed;
      top:0;left:0;right:0;bottom:0;
      margin:auto;
      animation: mymove 1s 1;
      -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
      .introduced-close{
        width:0.55rem;
        position: absolute;
        top:-0.3rem;
        right:-0.3rem;
        z-index:2;
      }
      .introduced-title{
        width:2.7rem;
        position: absolute;
        top:0.5rem;left:50%;
        transform: translate(-50%, 0);
        z-index: 2;
      }
      .introduced-background{
        width:100%;
        height:100%;
        position: absolute;
        top:0;left:0;
      }
      p{
        width:4rem;
        position: absolute;
        top:1.2rem;left:50%;
        transform: translate(-50%, 0);
        font-size:0.24rem;
        color:$color-4;
        line-height: 0.45rem;
        span{
          color:#ffdd22;
        }
      }
    }
  }
  .spell-process{
    width:100%;
    height:100%;
    position: fixed;
    top:0;left:0;
    overflow: hidden;
    animation: mymove 1s 1;
    -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
    .spell-process-background{
      width:100%;
      height:100%;
      position: fixed;
      top:0.48rem;left:0;
    }
    .spell-process-button{
      width:3.3rem;
      position: absolute;
      top:11.9rem;left:50%;
      transform: translate(-50%, 0);
    }
  }
  .spell-process-close{
    width:100%;
    height:100%;
    position: fixed;
    top:0;left:0;
    overflow: hidden;
    animation: mymove-close 1s 1;
    -webkit-animation: mymove-close 1s 1; /*Safari and Chrome*/
    .spell-process-background{
      width:100%;
      height:100%;
      position: fixed;
      top:0.48rem;left:0;
    }
    .spell-process-button{
      width:3.3rem;
      position: absolute;
      top:11.9rem;left:50%;
      transform: translate(-50%, 0);
    }
  }
  @keyframes mymove-close {
    from {
      transform: scale(1)
    }
    to {
      transform: scale(0)
    }
  }

  @-webkit-keyframes mymove-close {
    from {
      transform: scale(1)
    }
    to {
      transform: scale(0)
    }
  }
  @keyframes mymove {
    from {
      transform: scale(0)
    }
    to {
      transform: scale(1)
    }
  }

  @-webkit-keyframes mymove {
    from {
      transform: scale(0)
    }
    to {
      transform: scale(1)
    }
  }
  /*中奖记录*/
  .spell-winning-record{
    width:100%;
    height:100%;
    position: fixed;
    top:0;left:0;
    .spell-record-background{
      width: 100%;
      height:100%;
      position: fixed;
      background: $color-black;
      opacity:0.5;
    }
    .spell-record-box{
      width:4.9rem;
      height:5.3rem;
      position: fixed;
      top:0;left:0;right:0;bottom:0;
      margin:auto;
      animation: mymove 1s 1;
      -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
      .record-background{
        width:100%;
        height:100%;
      }
      .record-title{
        width:2.9rem;
        position: absolute;
        top:0.3rem;left:50%;
        transform: translate(-50%, 0);
      }
      .record-button{
        width:2.1rem;
        position: absolute;
        top:4rem;left:50%;
        transform: translate(-50%, 0);
      }
      .record-prize{
        width:4.2rem;
        height:2.2rem;
        position: absolute;
        top:1rem;left:50%;
        transform: translate(-50%, 0);
        .record-no-prize{
          width:2rem;
          position: absolute;
          top:0;left:50%;
          transform: translate(-50%, 0);
        }
        .record-miss{
          width:3rem;
          position: absolute;
          top:0;left:50%;
          transform: translate(-50%, 0);
        }
        div{
          .record-ticket{
            width:2rem;
            position: absolute;
            top:0.6rem;left:0.3rem;
          }
          .record-ticket-number{
            width:1.3rem;
            position: absolute;
            top:0.7rem;right:0.1rem;
          }
        }
      }
    }
  }
}
/*活动提示*/
.prompt-information-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:100;
  .prompt-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    opacity: 0.5;
    z-index: 1;
  }
  .prompt-backdrop {
    width: 70%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    animation: mymove 1s 1;
    -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
    .prompt-backdrop-img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .prompt-prompting {
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 0.5rem;
      padding-top: 0.5rem;
    }
    .prompt-prizes {
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 0.3rem;
      position: absolute;
      top: 2rem;
      left: 0;
      padding: 0.2rem;
    }
    .prompt-alert-button {
      width: 50%;
      position: absolute;
      top: 4.7rem;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
}
  /*玩法介绍*/
.gameplay-is-play {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  .play-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    z-index: 2;
    opacity: 0.5;
  }
  .play-backdrop {
    width: 5rem;
    height: 4.5rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
    animation: mymove 1s 1;
    -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
    .play-backdrop-img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .play-prompting-img {
      width: 2.8rem;
      position: absolute;
      top: 0.5rem;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 1;
    }
    .play-close {
      width: 0.45rem;
      position: absolute;
      top: -0.2rem;
      right: -0.2rem;
    }
    .play-txt {
      width: 4.2rem;
      line-height: 0.5rem;
      position: absolute;
      top: 1.2rem;
      left: 50%;
      transform: translate(-50%, 0);
      color: #fff;
      font-size: 0.24rem;
      div {
        /*img {*/
        /*width: 4.2rem;*/
        /*position: absolute;*/
        /*top: 5.5rem;*/
        /*left: 0;*/
        /*right: 0;*/
        /*bottom: 0;*/
        /*margin: auto;*/
        /*}*/
        p{
          img{
            width:0.6rem;
            position: relative;
            top:0.2rem;
          }
        }
      }
      span {
        color: #ffdd22;
      }
    }
  }
}
</style>
